<template>
  <div class="container">
    <nav-bar title="订单跟踪" />
    <div class="status">
      <h3>{{status}}</h3>
      <div class="company">
        <span>{{ express.ExpressCompanyName }}</span>
        <span>{{ express.ExpressNum }}</span>
      </div>
    </div>
    <div class="time-line" :style="{'height': open ? 'auto' : '200px'}">
      <!-- <div class="item">
        <h4>交易完成</h4>
        <p>订单交易完成</p>
        <div class="time">2020-01-21 17:39:27</div>
      </div> -->
      <div class="item" v-for="(item, index) in express.Comment" :key="index">
        <!-- <h4>已签收</h4> -->
        <p>{{item.content}}</p>
        <div class="time">{{item.time}}</div>
      </div>
      <div class="switch" @click="switchHeight">
        {{open ? '收缩':'展开全部'}}<i :class="{'open': open}"></i>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getExpressInfo } from '../../network/order'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      open: false,
      express: [],
      status: '',
    }
  },
  mounted() {
    let orderId = this.$route.query.orderId
    this.status = this.$route.query.status
    getExpressInfo({
      orderId,
      userkey: this.userKey,
    }, res => {
      this.express = res
    })
  },
  methods: {
    switchHeight(){
      this.open = !this.open
    }
  },
}
</script>

<style scoped>
.status{
  margin: 15px;
  border-radius: 6px;
  padding: 20px;
  background-color: #fff;
}
.status h3{
  padding-bottom: 10px;
  font-size: 16px;
}
.status span{
  font-size: 14px;
  padding-right: 10px;
}
.time-line{
  position: relative;
  margin: 15px;
  padding: 20px 20px 50px 20px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, .05);
}
.time-line .item{
  position: relative;
  padding-left: 20px;
  padding-bottom: 25px;
  border-left: 1px solid #eee;
}
.time-line .item:before{
  position: absolute;
  left: -4px;
  top: 12px;
  border-radius: 50%;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  background: #eee;
}
.time-line .item h4{
  font-size: 16px;
}
.time-line .item p{
  font-size: 14px;
  padding: 6px 0;
}
.time-line .item .time{
  font-size: 14px;
  color: #999999;
}
.switch{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding-bottom: 10px;
  line-height: 1;
  font-size: 14px;
  text-align: center;
  background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .9),  #ffffff);
}
.switch i{
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  margin-bottom: 1px;
  border-radius: 50%;
  border: 1px solid #666;
}
.switch i:after{
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2px;
  margin-top: -3px;
  width: 3px;
  height: 3px;
  border-bottom: 1px solid #666;
  border-right: 1px solid #666;
  transform: rotate(45deg)
}
.switch i.open:after{
  margin-top: -1px;
  transform: rotate(-135deg)
}
</style>